<template>
<el-row>
  <el-form label-width="145px">
    <el-form-item label="通道状态：">
      <span class="fz12" :class="enter_status < 0 ? 'err' : 'tip'">{{ enter_info }}</span>
    </el-form-item>
    <el-form-item label="错误信息：" v-if="enter_status < 0 || enter_status === 500">
      <span class="fz12 err">{{ error_info }}</span>
    </el-form-item>
    <el-form-item label="是否参加蓝海行动：">
      <el-switch v-model="channel.is_blue" active-color="#13ce66" disabled></el-switch>
    </el-form-item>
  </el-form>
  <el-form :model="channel" :rules="rules" :disabled="enter_status < 0 || enter_status === null ? false : true" size="small" ref="ws_channel" label-width="145px">
    <el-form-item label="经营地址：" prop="area">
      <el-cascader class="w240" :options="address" :props="props" v-model="channel.area"></el-cascader>
    </el-form-item>
    <el-form-item label="详细地址：" prop="address">
      <el-input class="w240" v-model="channel.address"></el-input>
    </el-form-item>
    <el-form-item label="经营类别：" prop="industry">
      <el-select v-model="channel.industry" class="w240">
        <el-option v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="手机号码：" v-show="!disabled">
      <el-input disabled class="w240" v-model="channel.phone" placeholder=""></el-input>
      <el-button v-if="show" type="warning" size="small" @click.stop="handleSendMes">获取验证码</el-button>
      <el-button v-else type="warning" size="small" :disabled="true">{{ this.count + 's后再次发送' }}</el-button>
    </el-form-item>
    <el-form-item label="验证码：" prop="msgCode" v-show="!disabled">
      <el-input class="w240" v-model.number="channel.msgCode" maxlength="6"></el-input>
    </el-form-item>
    <el-form-item label="渠道选择：">
      <el-button type="warning" size="small" disabled>D+1</el-button>
    </el-form-item>
    <el-form-item label="微信通道签约费率：" prop="wx_rate">
      <el-input class="w240" v-model="channel.wx_rate" maxlength="5"></el-input>%
    </el-form-item>
    <el-form-item label="支付宝签约费率：" prop="ali_rate">
      <el-input disabled maxlength="5" class="w240" v-model="channel.ali_rate"></el-input>%
    </el-form-item>
    <el-form-item>
      <el-checkbox v-model="checked">是否同意</el-checkbox><span class="tip" @click="handleClickPact(3)">《余利宝服务协议》</span><span class="tip" @click="handleClickPact(2)">《移动支付收单服务协议》</span><span class="tip" @click="handleClickPact(1)">《网商银行账户服务协议》</span>
    </el-form-item>
    <el-form-item v-if="!disabled">
      <el-button type="primary" size="small" @click="handleClickOnSubmit" :loading="btnSubmit">提交审核</el-button>
    </el-form-item>
  </el-form>
</el-row>
</template>

<script>
import { GetPactInfo, merchanenlChannelWsActiviQuery, merchanenlChannelWsActiUpdate, merchanenlChannelWsCategory, merchanenlChannelWsMsg, merchanenlChannelWsPhone } from '@/api/shop'

export default {
  data() {
    return {
      show: true,
      timer: null,
      count: 0,
      disabled: false,
      checked: false,
      btnSubmit: false,
      options: [],
      enter_status: null,
      enter_info: null,
      error_info: '',
      channel: {
        address: '',
        area: [],
        is_blue: true,
        wx_rate: '',
        industry: '',
        ali_rate: 0,
        balance_type: 'd1',
        msgCode: '',
        phone: ''
      },
      rules: {
        area: [{ required: true, trigger: 'change', message: '必须选择哦~' }],
        address: [{ required: true, trigger: 'blur', message: '必须填写哦~' }],
        industry: [{ required: true, trigger: 'change', message: '必须选择哦~' }],
        wx_rate: [{ required: true, trigger: 'blur', message: '必须填写哦~' }],
        ali_rate: [{ required: true, trigger: 'blur', message: '必须填写哦~' }],
        msgCode: [{ required: true, trigger: 'blur', message: '必须填写哦~' }]
      },
      props: {
        value: 'code',
        label: 'alias',
        children: 'city'
      }
    }
  },
  props: {
    address: {
      type: Array,
      required: true
    }
  },
  methods: {
    handleDocumentInit() {
      merchanenlChannelWsCategory().then(res => {
        if (res.data.errorCode === 0) {
          this.options = res.data.result
        } else {
          this.$message.error(res.data.errorMsg)
        }
      })
      merchanenlChannelWsPhone(this.$route.query.merchant_num).then(res => {
        if (res.data.errorCode === 0) {
          this.channel.phone = res.data.result
        } else {
          this.$message.error(res.data.errorMsg)
        }
      })
      merchanenlChannelWsActiviQuery(this.$route.query.merchant_num).then(res => {
        if (res.data.errorCode === 0) {
          this.checked = true
          this.channel.area = res.data.result.area.code
          this.channel.address = res.data.result.address
          this.channel.industry = res.data.result.industry.code
          this.channel.is_blue = res.data.result.is_blue
          this.channel.wx_rate = Number(res.data.result.wx_rate)
          this.channel.balance_type = res.data.result.balance_type
          this.enter_status = res.data.result.enter_status.code
          this.enter_info = res.data.result.enter_status.name
          this.error_info = res.data.result.enter_status.error_info
          this.channel.ali_rate = Number(res.data.result.ali_rate)
        } else {
          this.$refs['ws_channel'].resetFields()
          this.disabled = false
        }
      })
    },
    handleClickPact(type) {
      GetPactInfo(this.$route.query.merchant_num, type).then(response => {
        this.$alert(response.data.result, '', {
          dangerouslyUseHTMLString: true,
          showConfirmButton: false,
          showClose: false,
          closeOnClickModal: true,
          closeOnPressEscape: true,
          customClass: 'pactAlert'
        })
      })
    },
    handleClickOnSubmit() {
      this.$refs['ws_channel'].validate((v) => {
        if (v) {
          this.btnSubmit = true
          if (this.checked) {
            merchanenlChannelWsActiUpdate(this.$route.query.merchant_num, this.channel).then(res => {
              if (res.data.errorCode === 0) {
                this.$message.success(res.data.errorMsg)
                this.disabled = true
                this.btnSubmit = false
              } else {
                this.$message.error(res.data.errorMsg)
                this.btnSubmit = false
                return false
              }
            })
          } else {
            this.$message.error('请阅读相关协议~')
            this.btnSubmit = false
          }
        } else {
          return false
        }
      })
    },
    handleSendMes() {
      const TIME_COUNT = 60
      merchanenlChannelWsMsg(this.$route.query.merchant_num).then(response => {
        if (response.data.errorCode === 0) {
          this.$message.success(response.data.errorMsg)
          if (!this.timer) {
            this.count = TIME_COUNT
            this.show = false
            this.timer = setInterval(() => {
              if (this.count > 0 && this.count <= TIME_COUNT) {
                this.count--
              } else {
                this.show = true
                clearInterval(this.timer)
                this.timer = null
              }
            }, 1000)
          }
        } else {
          this.$message.error(response.data.errorMsg)
        }
      })
    }
  },
  created() {
    this.handleDocumentInit()
  }
}
</script>